import tradeAvatar from "@/views/trade/withdraw/components/tradeAvatar";
import {
  drawer_disable_ok_button,
  drawerFormState,
  drawerInputValidators,
  drawerInstance,
  isChecked,
  refreshComponent,
  agreeLoading,
  tableActiveKey,
  statusListOptions,
  defaultModalFormState,
  defaultVisible,
} from "./store";
import styles from "@/views/trade/recharge/index.module.less";
import { handleSubmit } from "./utils";
import { handleAction } from ".";
import { modalTitle } from "./components/modal";
export const drawerVisible = ref(false);
export const drawerLoading = ref(false);
export const drawerTitle = ref("");
export const drawerConfig = () => {
  const payOnBehalf = (type: number, event: any) => {
    if (type === 0) {
      handleAction({
        record: { id: drawerFormState.id },
        type: "agree",
      });
    }
    if (type === 1) {
      handleAction({
        record: { id: drawerFormState.id },
        type: "refuse",
      });
    }
  };
  const withdraw_help = ref<any>(null);
  const free_help = ref<any>(null);
  const defineDrawer = {
    width: "950px",
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    formState: drawerFormState,
    components: {
      tradeAvatar,
    },
    slot: {
      extra_form_item: () => {
        return (
          <>
            <div class={styles.drawer_container}>
              {tableActiveKey.value === 0 ? (
                <>
                  <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                    <s-title style="margin: 0">
                      {$t("base.withdrawInfo")}
                    </s-title>

                    {drawerFormState.status === 0 ? (
                      <a-spin spinning={agreeLoading.value}>
                        <div style="display: flex;gap: 10px;">
                          {withDirectivePower({
                            bindingValue: "withdrawApi.updateAgree",
                            vNode: (
                              <s-button
                                size="small"
                                onClick={payOnBehalf.bind(this, 0)}
                              >
                                {$t("base.agree")}
                              </s-button>
                            ),
                          })}
                          {withDirectivePower({
                            bindingValue: "withdrawApi.updateRefuse",
                            vNode: (
                              <s-button
                                size="small"
                                onClick={payOnBehalf.bind(this, 1)}
                              >
                                {$t("base.refuse")}
                              </s-button>
                            ),
                          })}
                        </div>
                      </a-spin>
                    ) : null}
                  </div>

                  <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                    <a-col span={8}>
                      {$t("withdraw33")}：{drawerFormState.order_number}
                    </a-col>
                    <a-col span={10}>
                      {$t("withdraw34")}：{drawerFormState.order_type}
                    </a-col>
                    <a-col span={6}>
                      {$t("withdraw35")}：
                      {selectDictLabel(
                        statusListOptions.value,
                        drawerFormState.status
                      )}
                    </a-col>
                  </a-row>
                  <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                    <a-col span={8}>
                      {$t("withdraw36")}：
                      {getTimeByZone(drawerFormState.withdraw_time)}
                    </a-col>
                    <a-col span={8}>
                      {$t("withdraw37")}：
                      {getTimeByZone(drawerFormState.arrival_time)}
                    </a-col>
                  </a-row>
                  <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                    <a-col span={8}>
                      <div style="display: flex;align-items: center;">
                        {$t("withdraw56")}:
                        <tradeAvatar
                          data={drawerFormState.user_info}
                          nicknameTextColor="#333"
                          isShowSexIcon={true}
                          style="flex: none;margin: 0 10px;"
                        />
                      </div>
                    </a-col>
                    <a-col span={8}>
                      {$t("withdraw38")}：{drawerFormState.phone_number}
                    </a-col>
                  </a-row>
                  <s-title>{$t("base.paymentInfo")}</s-title>
                  <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                    <a-col span={8}>
                      {$t("withdraw39")}：{drawerFormState.third_order_number}
                    </a-col>
                    <a-col span={8}>
                      <div
                        class="s-table-header_cell"
                        style="justify-content: flex-start"
                      >
                        <div
                          class="s-table-header_cell"
                          style="column-gap: 5px;justify-content: flex-start;"
                        >
                          <tips-cell content={$t("withdraw2")} />
                          <i>{$t("withdraw40")}：</i>
                        </div>
                        <div>{drawerFormState.pay_platform}</div>
                      </div>
                    </a-col>
                    <a-col span={8}>
                      {$t("withdraw41") + "(USDT)"}：
                      {drawerFormState.is_handling_fee === 0
                        ? $t("withdraw26")
                        : drawerFormState.handling_fee}
                    </a-col>
                  </a-row>
                  <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
                    <a-col span={8}>
                      {$t("withdraw42")}：{drawerFormState.passageway_name}
                    </a-col>
                    <a-col span={8}>
                      {$t("withdraw43") + "(USDT)"}：
                      {drawerFormState.withdraw_amount}
                    </a-col>
                    <a-col span={8}>
                      {$t("withdraw44") + "(USDT)"}：
                      {drawerFormState.arrival_amount}
                    </a-col>
                  </a-row>
                </>
              ) : (
                <>
                  <tips-card
                    parentClass={styles.drawer_container}
                    title={$t("withdraw9")}
                    content={$t("withdraw10")}
                  />
                  <a-row class="s-drawer-extra-row">
                    <s-title>{$t("base.baseSet")}</s-title>
                  </a-row>

                  <a-row class="s-drawer-extra-row" gutter={16}>
                    <a-col span={24}>
                      <a-form-item
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 8 }}
                        label={$t("withdraw19")}
                        name="name"
                        rules={[
                          {
                            required: true,
                            trigger: ["change", "blur"],
                            validator: (rule: any, value: any) => {
                              if (
                                !(
                                  /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value) &&
                                  value?.length >= 4 &&
                                  value?.length <= 12
                                )
                              ) {
                                drawerInputValidators[0] = true;
                                return Promise.reject(
                                  $t("placeholder87") +
                                    4 +
                                    $t("base.to") +
                                    12 +
                                    $t("base.digit")
                                );
                              }
                              drawerInputValidators[0] = false;
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        {withDirectiveInput({
                          vNode: (
                            <a-input
                              maxlength={12}
                              allowClear
                              vModel:value={drawerFormState.name}
                              placeholder={
                                $t("placeholder81") +
                                "4-12" +
                                $t("placeholder85")
                              }
                            />
                          ),
                        })}
                      </a-form-item>
                    </a-col>
                  </a-row>

                  <a-row class="s-drawer-extra-row">
                    <s-title>{$t("base.withdrawalSet")}</s-title>
                  </a-row>

                  <a-row class="s-drawer-extra-row" gutter={16}>
                    <a-col span={12}>
                      <a-form-item
                        validateStatus="error"
                        help={free_help.value}
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        label={$t("withdraw22")}
                        name="is_handling_fee"
                        rules={[
                          {
                            required: true,
                            trigger: ["change", "blur"],
                            message: $t("placeholder123"),
                          },
                        ]}
                      >
                        <a-radio-group
                          onChange={({ target: { value } }: any) => {
                            if (value === 0) {
                              drawerInputValidators[1] = false;
                              drawerInputValidators[2] = false;
                              free_help.value = null;
                            }
                            if (value === 1) {
                              drawerFormState.handling_fee_percentage =
                                undefined;
                            }
                          }}
                          v-model:value={drawerFormState.is_handling_fee}
                        >
                          <a-radio value={0}>{$t("withdraw26")}</a-radio>
                          <a-radio value={1}>{$t("withdraw45")}</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  {drawerFormState.is_handling_fee === 1 ? (
                    <a-row class="s-drawer-extra-row mb8" gutter={16}>
                      <a-col span={20} offset={4}>
                        <div class={styles.Flex}>
                          {withDirectiveInput({
                            bindingValue: "trim.textFilter.float",
                            vNode: (
                              <a-input
                                allowClear
                                placeholder={$t("placeholder81")}
                                style="width: 150px"
                                vModel:value={
                                  drawerFormState.handling_fee_percentage
                                }
                                addon-after="%"
                                onInput={({ target: { value } }: any) => {
                                  if (!value) {
                                    drawerInputValidators[1] = true;
                                    free_help.value = (
                                      <i class="fs10">{$t("placeholder102")}</i>
                                    );
                                    return;
                                  }

                                  if (!(+value >= 0.1 && +value <= 100)) {
                                    drawerInputValidators[1] = true;
                                    free_help.value = (
                                      <i class="fs10">
                                        {$t("withdraw51") +
                                          "0.1%" +
                                          $t("withdraw50") +
                                          "100%"}
                                      </i>
                                    );
                                    return;
                                  }
                                  drawerInputValidators[1] = false;
                                  free_help.value = null;
                                }}
                              />
                            ),
                          })}

                          <i>
                            {$t("withdraw51") +
                              "0.1%" +
                              $t("withdraw50") +
                              "100%"}
                          </i>
                        </div>
                      </a-col>
                    </a-row>
                  ) : null}

                  <a-row class="s-drawer-extra-row" gutter={16}>
                    <a-col span={24}>
                      <a-form-item
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 12 }}
                        label={$t("withdraw5")}
                        name="amount_list"
                        rules={[
                          {
                            required: true,
                            trigger: ["change", "blur"],
                            message: $t("placeholder168"),
                          },
                        ]}
                      >
                        <div class={styles.tags_flex}>
                          {refreshComponent.value ? (
                            <div class={styles.tag_list}>
                              {drawerFormState.amount_list?.map((item: any) => (
                                <a-tag
                                  color="#a1a1a1"
                                  closable
                                  onClose={(event: any) => {
                                    const index =
                                      drawerFormState.amount_list.indexOf(item);
                                    if (index >= 0) {
                                      drawerFormState.amount_list.splice(
                                        index,
                                        1
                                      );
                                    }
                                    refreshComponent.value = false;
                                    nextTick(() => {
                                      refreshComponent.value = true;
                                    });
                                  }}
                                >
                                  {{
                                    icon: renderIcon(
                                      "icon-meiyuan" + " " + styles.s_icon
                                    ),
                                    default: <i>{item}</i>,
                                  }}
                                </a-tag>
                              ))}
                            </div>
                          ) : null}

                          <div class={styles.add_tag}>
                            <div
                              class={[
                                styles.add_button,
                                drawerFormState.amount_list?.length >= 9
                                  ? "cursor-not-allowed"
                                  : "cursor-pointer",
                              ]}
                            >
                              <a
                                onClick={() => {
                                  defaultVisible[tableActiveKey.value].value =
                                    true;
                                  defaultModalFormState[
                                    tableActiveKey.value
                                  ].temValue = undefined;
                                  modalTitle.value = $t("withdraw54");
                                }}
                                class={
                                  drawerFormState.amount_list?.length >= 9
                                    ? "pointer-events-none"
                                    : "pointer-events-auto"
                                }
                              >
                                {$t("withdraw54")}
                              </a>
                            </div>
                            <div class={styles.tips}>
                              <i>
                                {$t("withdraw55") +
                                  9 +
                                  $t("withdraw57") +
                                  "30USDT。"}
                              </i>
                            </div>
                          </div>
                        </div>
                      </a-form-item>
                    </a-col>
                  </a-row>

                  <a-row class="s-drawer-extra-row" gutter={16}>
                    <a-col span={24}>
                      <a-form-item
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 12 }}
                        label={$t("withdraw21")}
                        name={
                          drawerFormState.is_withdraw_amount_limit === 0
                            ? "is_withdraw_amount_limit"
                            : "max_withdraw_count"
                        }
                        help={withdraw_help.value}
                        validateStatus="error"
                        rules={[
                          {
                            required: true,
                            trigger: ["blur", "change"],
                          },
                        ]}
                      >
                        <div style="display: flex;align-items: center;white-space: nowrap;">
                          <a-form-item-rest>
                            <a-radio-group
                              onChange={({ target: { value } }: any) => {
                                if (value === 0) {
                                  drawerInputValidators[2] = false;
                                  withdraw_help.value = null;
                                  drawerFormState.max_withdraw_amount =
                                    undefined;
                                  drawerFormState.max_withdraw_count =
                                    undefined;
                                  if (isStartDev.value)
                                    return drawerInstance.value.ctx.refs?.formValidate?.clearValidate(
                                      "max_withdraw_count"
                                    );
                                  drawerInstance.value.proxy.refs?.formValidate?.clearValidate(
                                    "max_withdraw_count"
                                  );
                                }

                                if (value === 1) {
                                  drawerFormState.max_withdraw_amount =
                                    undefined;
                                  drawerFormState.max_withdraw_count =
                                    undefined;
                                }
                              }}
                              vModel:value={
                                drawerFormState.is_withdraw_amount_limit
                              }
                            >
                              <a-radio value={0}>{$t("withdraw24")}</a-radio>
                              <a-radio value={1}>{$t("withdraw46")}</a-radio>
                            </a-radio-group>
                          </a-form-item-rest>
                        </div>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  {drawerFormState.is_withdraw_amount_limit === 1 ? (
                    <a-row class="s-drawer-extra-row mb8" gutter={16}>
                      <a-col span={20} offset={4}>
                        <div class={styles.Flex}>
                          <a-checkbox
                            vModel:checked={isChecked[0]}
                            onChange={({ target: { checked } }) => {
                              if (checked === false) {
                                drawerFormState.max_withdraw_amount = undefined;
                              }
                            }}
                          >
                            {$t("withdraw48")}
                          </a-checkbox>

                          {isChecked[0] ? (
                            <>
                              <div class={styles.Input}>
                                <a-input
                                  allowClear
                                  placeholder={$t("placeholder81")}
                                  style="width: 150px"
                                  vModel:value={
                                    drawerFormState.max_withdraw_amount
                                  }
                                  addon-after="USDT"
                                  onkeyup={({ target }) => {
                                    only_limit_charts(target);
                                    onlyFloat(target, 2);
                                    onlyTrim(target);
                                  }}
                                  onInput={({ target: { value } }: any) => {
                                    if (!value) {
                                      if (
                                        isEmptyType(
                                          drawerFormState.max_withdraw_count
                                        )
                                      ) {
                                        drawerInputValidators[2] = true;
                                        withdraw_help.value = (
                                          <i class="fs10">
                                            {$t("placeholder102")}
                                          </i>
                                        );
                                        return;
                                      }
                                    }

                                    if (
                                      !isEmptyType(value) &&
                                      +value >
                                        Math.max(...drawerFormState.amount_list)
                                    ) {
                                      drawerInputValidators[2] = true;
                                      withdraw_help.value = (
                                        <i class="fs10">{$t("withdraw52")}</i>
                                      );
                                      return;
                                    }
                                    drawerInputValidators[2] = false;
                                    withdraw_help.value = null;
                                  }}
                                />
                                <i>{$t("withdraw52")}</i>
                              </div>
                            </>
                          ) : null}
                        </div>
                      </a-col>
                    </a-row>
                  ) : null}

                  {drawerFormState.is_withdraw_amount_limit === 1 ? (
                    <a-row class="s-drawer-extra-row" gutter={16}>
                      <a-col span={20} offset={4}>
                        <div class={styles.Flex}>
                          <a-checkbox
                            vModel:checked={isChecked[1]}
                            onChange={({ target: { checked } }) => {
                              if (checked === false) {
                                drawerFormState.max_withdraw_count = undefined;
                              }
                            }}
                          >
                            {$t("withdraw49")}
                          </a-checkbox>

                          {isChecked[1] ? (
                            <>
                              <div class={styles.Input}>
                                <a-input
                                  allowClear
                                  placeholder={$t("placeholder81")}
                                  style="width: 150px"
                                  vModel:value={
                                    drawerFormState.max_withdraw_count
                                  }
                                  addon-after="次"
                                  onkeyup={({ target }) => {
                                    only_limit_charts(target);
                                    onlyInt(target);
                                    onlyTrim(target);
                                  }}
                                  onInput={({ target: { value } }: any) => {
                                    if (!value) {
                                      if (
                                        isEmptyType(
                                          drawerFormState.max_withdraw_amount
                                        )
                                      ) {
                                        drawerInputValidators[2] = true;
                                        withdraw_help.value = (
                                          <i class="fs10">
                                            {$t("placeholder102")}
                                          </i>
                                        );
                                        return;
                                      }
                                    }

                                    drawerInputValidators[2] = false;
                                    withdraw_help.value = null;
                                  }}
                                />
                                <i>{$t("withdraw53")}</i>
                              </div>
                            </>
                          ) : null}
                        </div>
                      </a-col>
                    </a-row>
                  ) : null}

                  <a-row class="s-drawer-extra-row">
                    <s-title>{$t("base.otherSet")}</s-title>
                  </a-row>

                  <a-row class="s-drawer-extra-row" gutter={16}>
                    <a-col span={24}>
                      <a-form-item
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 12 }}
                        label={$t("withdraw23")}
                        name="comment"
                      >
                        {withDirectiveInput({
                          vNode: (
                            <a-textarea
                              vModel:value={drawerFormState.comment}
                              rows="4"
                              show-count
                              maxlength="200"
                              placeholder={$t("placeholder176")}
                            />
                          ),
                        })}
                      </a-form-item>
                    </a-col>
                  </a-row>
                </>
              )}
            </div>
          </>
        );
      },
      extra: () => {
        const { loading } = defineDrawer;
        return (
          <>
            <a-space size={8}>
              {tableActiveKey.value === 1 ? (
                <s-button
                  icon={renderIcon("icon-cancel")}
                  onClick={() => (defineDrawer.visible.value = false)}
                >
                  {$t("base.cancel")}
                </s-button>
              ) : null}

              <s-button
                icon={renderIcon("icon-tubiao_tijiao")}
                loading={loading.value}
                disabled={
                  (drawer_disable_ok_button?.value ??
                    drawer_disable_ok_button) ||
                  drawerInputValidators.some((bool) => bool === true)
                }
                type="primary"
                onClick={async () => {
                  let { loading, visible } = defineDrawer;
                  handleSubmit({ loading, visible });
                }}
              >
                {tableActiveKey.value === 0 ? $t("base.ok") : $t("base.save")}
              </s-button>
            </a-space>
          </>
        );
      },
    },
  };
  return defineDrawer;
};
